<template>
	<view>
		<uni-popup
			ref="timePickRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title mt20">
					{{ title }}
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<picker-view
						:indicator-style="indicatorStyle"
						:value="selectTime"
						@change="bindChange"
						class="picker-view"
					>
						<picker-view-column>
							<view
								class="item"
								v-for="(item, index) in list"
								:key="index"
							>
								{{ item.text }}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="popup-bottom1 df ac"
					><button class="btn w90" @tap="submitChoose()">
						确定
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>
<script>
export default {
	props: {
		title: {
			type: String,
			default: '',
		},
		showPick: {
			type: Boolean,
			default: false,
		},
		list: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			indicatorStyle: `height: 50px;`,
			selectTime: this.list[0]?.value ? this.list[0]?.value : '',
			selectValue: this.list[0]?.value ? this.list[0]?.value : '',
		}
	},
	onReady() {},
	methods: {
		submitChoose() {
			this.$emit('submit', this.selectValue)
			//this.closePopup();
		},
		bindChange(e) {
			const val = e.detail.value[0]
			this.selectValue = this.list[val].value
		},
		openPopup() {
			this.$refs.timePickRef.open('bottom')
		},
		closePopup() {
			this.$refs.timePickRef.close()
			this.$emit('close')
		},
	},
	watch: {
		showPick(val, oldVal) {
			if (val) {
				this.selectTime = this.list[0]?.value ? this.list[0]?.value : ''
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
		list(val) {
			this.selectValue = val[0].value ? val[0].value : ''
			this.selectTime = val[0].value ? val[0].value : ''
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: calc(100vh - 500rpx);
}
.picker-view {
	text-align: center;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
.active {
	color: $primary-color;
}
.btn {
	height: 80rpx;

	line-height: 80rpx;

	text-align: center;

	background: linear-gradient(155deg, #2d94ff 1%, #b7daff 100%);

	border-radius: 80rpx;

	font-size: 34rpx;

	color: #ffffff;

	font-weight: 700;

	padding: 0 8px;
}

.popup-bottom1 {
	position: fixed;

	left: 0;

	bottom: 0;

	width: 100%;

	height: 120rpx;

	z-index: 99;

	background-color: #ffffff;

	box-shadow: 0px -2px 16px 0px rgba(0, 0, 0, 0.08);

	display: flex;

	align-items: center;
}
</style>
